﻿
@{
    ViewBag.Title = "Job Detail";
}
<script src="~/Scripts/Breezejs/JobDetail.js"></script>
<style>
    .modal-footer{
        text-align: initial;
    }
    .infor {
        min-height: 50px;
        max-height: 400px;
    }
</style>

<div id="detailinformation">
    <div class="col-md-7">
        <div id="jobdetail">
            <h2><span data-bind="text: Jobdetail().Name()"></span></h2>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Employer Description</h3>
                </div>
                <div class="panel-body" style="min-height: 100px">
                    <textarea readonly style="border: none;resize:none; height:100px" data-bind="value: Jobdetail().PersonalInfor().Description()"></textarea>
                </div>
            </div>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Job Details</h3>
                </div>
                <div class="panel-body">
                    <table class="col-md-12 infotable">                        
                        <tbody>
                            <tr>
                                <td><span>Job Name</span></td>
                                <td><span data-bind="text: Jobdetail().Name()"></span></td>
                            </tr>
                            <tr>
                                <td><span>Job Code</span></td>
                                <td><span data-bind="text: Jobdetail().UniqueId()"></span></td>
                            </tr>
                            <tr>
                                <td><span>Location</span></td>
                                <td><span data-bind="text: Jobdetail().Location().Name()"></span></td>
                            </tr>
                            <tr>
                                <td><span>Salary</span></td>
                                <td>
                                    <span data-bind="text: Jobdetail().StandardSalary"></span>
                                    <span data-bind="text: Jobdetail().Currency().Currencysigns"></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span>Industry</span></td>
                                <td><span data-bind="text: Jobdetail().Industry().Name()"></span></td>
                            </tr>
                            <tr>
                                <td><span>Job description</span></td>
                                <td>
                                    <textarea readonly class="infor" style="resize:none; border:none" data-bind="text: Jobdetail().Description()"></textarea>                                  
                                </td>
                            </tr>
                            <tr>
                                <td><span>Requirement</span></td>
                                <td>
                                    <textarea readonly class="infor" style="resize:none; border:none" data-bind="text: Jobdetail().Requirement()"></textarea>                                   
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- ko template: Role() == 'Employer' && isEdit() == true ? '_allowEdit' : '' --><!-- /ko -->
            <!-- ko template: Role() == 'Worker' && isApply() == false ? '_allowApply' : '' --><!-- /ko -->
            <!-- ko template: Role() == 'Worker' && isApply() == true ? '_notallowApply' : '' --><!-- /ko -->
            <div id="_loading" style="height: 50px; width:70px; float: left; display:none">
                <img style="width:100%; height: 100%" src="~/Content/loading.gif" />
            </div>
            

            <script id="_allowEdit" type="text/html">
                <button id="applyjob" type="button" class="btn btn-default btn-lg disable" style="float:left" data-bind="click: $root.view">
                    <span class="glyphicon glyphicon-pencil"></span> Edit
                </button>
            </script>
            <script id="_allowApply" type="text/html">
                <button id="applyjob" type="button" class="btn btn-default btn-lg disable" style="float:left" data-bind="click : vm.applyJob">
                    <span class="glyphicon glyphicon-ok"></span> Apply
                </button>               
            </script>
            <script id="_notallowApply" type="text/html">
                <span class="glyphicon glyphicon-ok"></span>
                <label><i>You've already applied in this job</i></label>
            </script>
</div>
    </div>

    <!-- ko template: Role() == 'Employer' && vm.Jobdetail().PersonalInfor().UniqueId() == $.trim($('#_perid').text()) ? '_employee' : '' --><!-- /ko -->

    <script id="_employee" type="text/html">
        <div class="col-md-5" style="min-height: 150px">
            <h3>Employee</h3>
            <table id="employee" class="table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Full Name</th>                       
                    </tr>
                </thead>            

                <tbody data-bind="foreach: Employee">
                    <tr>
                        <td class="input-sm" data-bind="text: UniqueId()">
                            
                        </td>
                        <td>
                            <a href="javascript:void(0)" title="Information" data-bind="click: $root.basicInfor">
                                <span data-bind="text: Name()"></span>
                            </a>
                            
                        </td>

                    </tr>
                </tbody>
            </table>

            <!-- ko if: Employee().length == 0 -->
            <div align="center">
                <span><i>No one apply</i></span>
            </div>
            
            <!-- /ko -->
        </div>
    </script>

    <div class="col-md-5">
        <h3>Related Jobs</h3>
        <table id="relatedjobs" class="table">
            <thead>
                <tr>
                    <th>Job Name</th>
                    <th>Salary (VND)</th>
                    <th>Date Posted</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: RelatedJobs">
                <tr>
                    <td>
                        <a data-bind="attr: { href: '/Home/JobDetail/?jobcode=' + UniqueId() }"><span data-bind="text: Name"></span></a>
                    </td>
                    <td><span data-bind="text: StandardSalary"></span></td>
                    <td><span data-bind="text: moment(DatePost()).format('DD/MM/YYYY')"></span></td>
                </tr>
            </tbody>
        </table>
    </div>

</div>


<div id="infor" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">About <span data-bind="text: Name"></span></h4>
            </div>
            <div class="modal-body">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label class="col-xs-2">ID</label>
                        <div class="col-xs-10">
                            <span data-bind="text: UniqueId"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2">Birthday</label>
                        <div class="col-xs-10">
                            <span data-bind="text: moment(Birthday()).format('DD/MM/YYYY')"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2">BirthPlace</label>
                        <div class="col-xs-10">
                            <span data-bind="text: PlaceofBirth"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2">Nationality</label>
                        <div class="col-xs-10">
                            <span data-bind="text: Nationality"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2">Description</label>
                        <div class="col-xs-10">
                            <span data-bind="text: Description"></span>
                        </div>
                    </div>                   
                </div>


            </div>
            <div class="modal-footer">
                <div style="clear:both">
                    <form id="_charge" action="/Employer/WorkerDetail" method="post">
                        <input style="display:none" type="text" name="personid" data-bind="value: UniqueId" />
                        <a style="float:left" href="javascript:document.getElementById('_charge').submit();">Want to know more (Education, Experience, Career, etc.) ?</a>
                        <div style="float:left">
                            <small>By clicking, you'll be charged a small fee each months</small>
                        </div>   
                    </form>
                    <button type="button" class="btn btn-default" style="float:right" data-dismiss="modal">Close</button>
                </div>
                            
                
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="priModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content custom-modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modify job</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-xs-2">Job Name</label>
                        <div class="col-xs-10">
                            <input data-bind="value: $data.Name" class="form-control" type="text" placeholder="Job name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-2">Status</label>
                        <div class="col-xs-10">
                            <select class="form-control" data-bind="value: $data.Status">
                                <option value=1>Open</option>
                                <option value=0>Closed</option>
                            </select>

                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" col-xs-2">Country</label>
                        <div class="col-xs-2">
                            <select class="form-control" data-bind="options: vm.Location,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: $data.country
                                           "></select>
                        </div>

                        <label class="col-xs-2" style="padding-top:7px">Province</label>
                        <div class="col-xs-2">
                            <select class="form-control" data-bind="options: vm.Province,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: province
                                           "></select>
                        </div>

                        <label style="padding-top:7px" class="col-xs-2">City</label>
                        <div class="col-xs-2">
                            <select class="form-control" data-bind="options: vm.City,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: city
                                           "></select>
                        </div>

                    </div>

                    <div class="form-group">
                        <label class=" col-xs-2">Salary</label>
                        <div class="col-xs-4">
                            <input id="msalary1" class="form-control input-sm" data-bind="value: $data.SalaryFrom" type="text" placeholder="Minimum" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="this.value = addCommas(this.value)" />
                            <input id="m_competitive" data-bind="checked: competitive" type="checkbox"> Competitive
                        </div>
                        <div class="col-xs-4">
                            <input id="msalary2" class="form-control input-sm" data-bind="value: $data.SalaryTo" type="text" placeholder="Maximum" onkeyup="this.value = this.value.replace(/\D/g, '')" onchange="this.value = addCommas(this.value)" />
                        </div>
                        <div class="col-xs-2">
                            <select id="msalary3" class="form-control input-sm" data-bind="options: vm.Currency,
                                           optionsText: function(item) {
                       return item.Name() + ' ' + item.Currencysigns();
                   },
                                           optionsValue: 'UniqueId',
                                           value: CurrencyId,
                                           optionsCaption: 'Currency'"></select>
                        </div>

                    </div>
                    <div class="form-group">
                        <label style="padding-top:7px" class=" col-xs-2">Industry</label>
                        <div class="col-xs-4">
                            <select class="form-control" data-bind="options: vm.Industry,
                                           optionsText: 'Name',
                                           optionsValue: 'UniqueId',
                                           value: industry,
                                           "></select>
                        </div>
                        <label style="padding-top:7px" class="col-xs-2">Function</label>
                        <div class="col-xs-4">
                            <select class="form-control" data-bind="options: vm.Function,
                                            optionsText: 'Name',
                                            optionsValue: 'UniqueId',
                                            value: func
                                            "></select>
                        </div>

                    </div>

                    <div class="form-group">
                        <div class="col-md-6" style="padding-right:2px">
                            <label>Job Description</label>
                            <textarea id="_textareJD" data-bind="value: Description" class="form-control" style="width: 100%; min-height:150px"></textarea>
                        </div>
                        <div class="col-md-6" style="padding-left:2px">
                            <label>Requirement</label>
                            <textarea id="_textareR" data-bind="value: Requirement" class="form-control" style="width: 100%; min-height: 150px"></textarea>
                        </div>

                    </div>

                </form>
            </div>
            <div class="modal-footer" style="text-align:right">
                <img id="_mdloadind" style="width:40px; height: 40px; display:none" src="~/Content/loading.gif" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-bind="click: vm.modifyJob">Save</button>
            </div>
        </div>
    </div>
</div>